<template>
    <div style="margin-bottom:56px">
        <v-toolbar flat color="primary">
           <v-btn icon flat>
                <v-icon color="white" medium @click="goBack()">keyboard_arrow_left</v-icon>
           </v-btn>
           <v-toolbar-title style="margin-left:0">
               <span style="color:white">跳蚤市场</span>
           </v-toolbar-title>
            <v-btn icon flat style="position:absolute;margin-right:16px;right:0px;margin-top:0">
                <v-icon color="white" medium>mail_outline</v-icon>
            </v-btn>         
        </v-toolbar>

        <!-- 搜索框 -->
        <div style="background-color:#4caf50;height:50px">
            <v-layout class="search">
                <v-flex xs1>
                    <v-icon color="gray" id="icon">search</v-icon>
                </v-flex>
                <v-flex xs11>
                    <input type="text" placeholder="请输入商品名称" v-model="commodityName" style="height:25px;font-size:16px;width:100%;margin-top:8px" @keyup.enter="searchGoods()"/>
                </v-flex>
            </v-layout>
        </div>
   
        <!-- 分类别显示商品 -->
        <div>
            <!--
            <v-tabs fixed-tabs color="primary" dark>
                <v-tab v-for="(t,index) in tabs" :key="`tabs-${index}`"><strong>{{t.title}}</strong></v-tab>
            </v-tabs>
            <v-tabs-items>
                <v-tab-item v-for="(t,l) in tabs" :key="`t-${l}`">
                    -->
                    <v-list three-line>
                        <template v-for="(item,index) in commodities">
                            <v-list-tile :key="`item-${index}`" avatar @click="goToDetails(item.goodsId)">
                               <v-list-tile-avatar>
                                   <img :src="item.attachments[0].attachmentUrl">
                               </v-list-tile-avatar>
                               <v-list-tile-content>
                                   <v-list-tile-title v-text="item.goodsName"></v-list-tile-title>
                                   <v-list-tile-sub-title v-text="item.goodsDetail"></v-list-tile-sub-title>
                                   <v-list-tile-sub-title>￥{{item.goodsPrice}}</v-list-tile-sub-title>
                               </v-list-tile-content>
                            </v-list-tile>
                            <v-divider v-if="index+1<commodities.length" :key="`divider-${index}`"></v-divider>
                        </template>
                    </v-list>
        </div>
        
        <!-- 发布商品 -->
        <v-card>
            <v-card-text style="position:fixed;bottom:32px;z-index:1;padding:0">
                <v-btn absolute dark fab top left color="green" style="left:43%" @click="$router.push('flea-market/release-commodity')">
                <v-icon>add</v-icon>
                </v-btn>
            </v-card-text>
        </v-card>
        
   
   </div>
</template>

<script>


export default {

    name:'commodity',

    data(){ /* 后台获取 */
        return{

          /*  tabs:[
                {title:'二手商品'},
                {title:'售房'},
                {title:'车位'}
            ],*/

            page:0,
            commodities:[],
            commodityName:'', //用于搜索
           
        }
    },

    methods:{

        addItem(){
            var scrollTop=document.documentElement.scrollTop || window.pageYOffset ||document.body.scrollTop
            var goods=this.getGoods()
            if(scrollTop+window.innerHeight>=document.body.offsetHeight){
                for(var i in goods){
                    this.commodities.push(goods[i])
                }
            }
        },

        getGoods(){
            var goods=[];
             this.$axios({
                method:'get',
                url:this.SERVER+'/goods/',
                params:{
                    pageNum:this.page,
                    pageSize:10,
                    goodsName:this.commodityName
                },
                headers:{
                    'Content-Type':'multipart/form-data',
                    'Authorization':'bearer '+localStorage.getItem('Access-Token')
                }
            }).then(response=>{
                    var res=response['data']['data']['rows']
                    console.log(res)
                    for(var i in res){
                        goods.push(res[i]);
                    }
            
                }
            ),response=>({
                function(response){
                    console.log(response)
                }
            })

            this.page++;
            return goods;
        },

        searchGoods(){
            this.page=0;
            this.commodities=[];
            this.addItem();
        },

        goToDetails(id){
            this.$router.push('/flea-market/'+id+'/commodity-details');
        },
        goBack(){
            this.$router.back(-1);
        }
    },

    mounted(){
        this.addItem()
        window.addEventListener('scroll', this.addItem)
    },
    destroyed(){
        window.removeEventListener('scroll',this.addItem)
    }
    
}
</script>

<style scoped>

    .v-input__slot{
        margin-top:0px;
        padding-top:0px;
    }

    .layout{
        margin-left:5%;
        margin-top:2%;
    }

    input:focus{
        outline:none;
    }

    .search{
        background-color:white;
        border-radius:25px;
        margin-top:0px;
        margin-right:18px;
        height:80%
    }

    .flex.xs1{
        margin-top:8px;
        margin-left:8px;
    }

</style>
